<template>
  <div class="tabViewBox">
    <div 
      class="item" 
      v-for="item in list " 
      @click.stop="onClick(item.name)" 
      :key="item.name" 
      :style="{
        background: item.name === route.name ? '#333' : '#fff',
        color: item.name === route.name ? '#fff' : '#333'
      }">
      {{ item.meta.title }}
      <tabView :list="item.children" v-model="active"></tabView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const props = defineProps<{
  modelValue: string,
  list: any
}>()
const emit = defineEmits(['update:modelValue'])

const router = useRouter()
const route = useRoute()
const active = ref(props.modelValue)

const onClick = (name: string) => {
  emit('update:modelValue', name)
  router.push({ name })
}

</script>

<style lang="scss" scoped>
.tabViewBox {
  display: flex;
}

.item {
  padding: 16px 24px;
  border: 1px solid #ccc;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.item:hover {
  background: #333 !important;
  color: #fff !important;
}
</style>
